<template>
  <main>
    <ul class="container">
      <li
        v-for="(item, index) in list"
        :key="item.id"
        class="item"
        :class="index % 2 === 0 ? 'even' : 'odd'"
        @click="removeItem(index)"
      >
        <img :src="item.coverImgUrl" class="cover" />
        <p class="title">{{ item.name }}</p>
      </li>
    </ul>
  </main>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue'
const props = defineProps({
  list: {
    type: Array,
    required: true,
  },
})
const emit = defineEmits(['delete-item'])

function removeItem(index) {
  emit('delete-item', index)
}
</script>

<style scoped>
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  list-style: none;
}
.item {
  display: flex;
  width: 210px;
  height: 270px;
  padding: 5px;
  padding-block: 13px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
  border-radius: 10px;
}
.container .item .cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.item.even {
  border: 1px solid red;
}
.item.odd {
  border: 1px solid green;
}
</style>
